import Vue from 'vue'

import Vuex from 'vuex'
import mine from "@/store/mine";
import user from "@/store/user";
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({

    plugins: [
        createPersistedState(),
    ],

    // vueX中存放的数据 相当于组件中的data
    state: {
        msg: '这是vueX存放的MSG',
        stateObj: {
            age: 20
        },
        count: 50,
        mineNum: 666
    },
  // 对state中的数据进行初加工，相当于计算属性computed，会对数据进行缓存，但是不会改变state中的数据，会产生新的数据
    getters: {
      getCount(state) {
        console.log(state, 'state')
        return state.count
      },
      getMsg(state) {
        console.log(state, 'stateMsg')
      }
    },
  // 更改vueX中store数据的唯一方法 必须是同步的
    mutations: {
      // payload:传过来的参数
      setCount(state, payload) {
        console.log(state, 'mutations中的state')
        console.log(payload, 'mutations中的payload')
        // state.count=payload
        // state.count=payload.abc
        // state.count=payload[0]
        // state.count = payload.abc
        state.count = payload
      },
      setMsgMu(state, payload) {
        console.log(state, 'setMsgMu中的state')
        console.log(payload, 'setMsgMu中的payload')
        state.msg = payload
      },
      setMineNum(state, payload){
        console.log(state,'index setMineNum的state')
        console.log(payload,'index setMineNum的payload')
        state.mineNum = payload
      }
    },
  // 可以异步修改state中的数据 需要依赖mutations
    actions: {
      // context：上下文环境  payload：传过来的参数
      setMsg(context, payload) {
        console.log(context, 'setMsg的content')
        console.log(payload, 'setMsg的payload')
        setTimeout(() => {
          // context.commit('setMsgMu', payload.msgNew)
          context.commit('setMsgMu', payload)
        }, 1000)
      }
    },
    modules: {
      mine,
      user
    }
})
